<template>
  <!--"-->
  <div style="background-color: white;padding: .05rem .3rem .4rem .3rem" v-if="isRadio==0">
    <div style="background-color:#f7f7fa;padding: .2rem 0 .3rem 0.3rem;border-radius:.1rem;border: 1px solid #cccccc">
      <div style="text-align:center;font-family:'PingFangSC regular';font-size: 0.4rem;margin-bottom: .3rem;margin-right: .3rem;
      color: #333333;font-weight: bold">{{checkboxtitle}}(多选)</div>
      <div style="background: #cccccc;height: 1px;margin-right: .3rem;margin-bottom: .3rem"></div>
      <div class="range-style" v-for="(item,ylindex) in voteContent" :key="ylindex">
        <div class="range-content" style="margin-right: .3rem">
          <div style="margin-left: -0.08rem;display: flex">
            <div>
              <input class="checkbox-myinput" v-if="restRepeat!=0" type="checkbox" :id="ylindex+1" name="haha"
                     v-model="item.checked" @change="choosevote(item.checked,ylindex)"/>
            </div>
            <div style="display: inline-block;margin-top: 0rem;margin-left: .15rem;">
              <label class="checkbox-mylabel" v-if="restRepeat!=0" :for="ylindex+1">{{decodeURIComponent(item.voteContent.content)}}<span v-if="item.selected" style="color:#fb685b">(已选)</span></label>
            </div>
          </div>
          <span v-if="isVote&&restRepeat==0">{{decodeURIComponent(item.voteContent.content)}}<span v-if="item.selected" style="color:#fb685b">(已选)</span></span>
          <ul class="range-ul">
            <li class="range-ul-li" v-for="(items,i) in item.votePictures" :key="i">
              <img class="range-ul-img" :src="items.url+'?imageView2/1/w/197/h/156'" alt="" @click="showImage(ylindex,i)" />
              <viewMultiImg v-if="imgShow" :picarray="voteContent[myindex].votePictures" :imageIndex="imageIndex" @diminish="diminish"></viewMultiImg>
            </li>
          </ul>
        </div>
        <div v-if="isVote">
          <mt-progress class="checkbox-myprogress" :value="item.getvotes/allvotes*100" :bar-height="3" style="width: 6.3rem;">
            <div slot="end" class="range-span" style="margin-left:.6rem;">{{item.getvotes}}
              <span class="span-word" >票</span>
              <span style="margin-left: 0.1rem;margin-right:0.1rem">{{item.percent||"0.00"}}%</span>
            </div>
          </mt-progress>
        </div>
      </div>
      <div style="height: 1px;background: #cccccc;margin-right: .3rem"></div>
      <div style="text-align:center;" v-if="voteStatus==0&&restRepeat!=0">
        <button class="vote-button" @click.stop="ylVote()">投票</button>
      </div> 
      <div style="text-align:center;margin-top:.2rem" v-if="voteStatus==0&&!isVote&&restRepeat!=0">
        <span class="vote-left-count" >(今日可投次数：{{restRepeat}}次)</span>
      </div>  
      <div style="text-align:center;" v-if="voteStatus==0&&!isVote&&restRepeat==0">
        <span class="vote-left-count" >(今日可投次数：0次，明天再来哦)</span>
      </div>
      <div style="text-align:center;" v-if="voteStatus==1">
        <button class="vote-button-nostart" @click="ylVotenostart()">投票</button>
      </div>
      <div style="text-align:center;margin-top:.3rem" v-if="isVote">
        <span v-if="voteStatus==0&&restRepeat==0" class="checkbox-result-span">共<span class="checkbox-range-span">{{peoplenum}}</span>人投票<span v-if="youisvote">(你已投票)</span></span>
        <div v-if="voteStatus==2&&restRepeat==0"  class="checkbox-result-message">投票已结束</div>
        <div v-if="voteStatus==1"  class="checkbox-result-message">投票未开始</div>
        <div v-if="voteStatus==0&&restRepeat!=0"  class="checkbox-result-message" style="margin-top:-0.1rem">(今日可投次数：{{restRepeat}}次)</div>
        <div v-if="voteStatus==0&&restRepeat==0"  class="checkbox-result-message" style="margin-top:.2rem;">(今日可投次数：0次，明天再来哦)</div>
      </div>
      <div style="text-align:center;" v-if="voteStatus==1">
        <div v-if="voteStatus==1" style="margin-top:.2rem;" class="checkbox-result-message">投票未开始</div>
      </div>
    </div>
  </div>
</template>
<script>
  import { Progress as mtProgress } from 'mint-ui'
  import viewMultiImg from 'src/components/viewImage/viewMultiImg'
  export default {
    data () {
      return {
        voteContentId:'',
        voteId:'',
        tag: 0,
        mytest: this.voteContent,
        imgShow: false,
        myindex: ''
      }
    },
    components: {
      mtProgress, viewMultiImg
    },
    props:['voteContent' ,'isVote','peoplenum','isRadio','allvotes','checkboxtitle','voteStatus','youisvote','restRepeat'],
    mounted () {
      _each(this.voteContent,(v,i)=>{
        v.checked = false
      })
    },
    methods: {
      ylVote(){
        this.$emit("submitcheckbox")
      },
      ylVotenostart(){
        this.$toast("投票活动未开始哟")
      },
      choosevote(checked,ylindex){
        this.$emit("record",{checked:checked,ylindex:ylindex})
      },
      showImage (ylindex,index) {
        this.myindex = ylindex
        let loadmore = document.getElementsByClassName("loadmore-ul")
        if(loadmore.length > 0) loadmore[0].style.transform = "" ;

        this.imageIndex = index ;
        this.imgShow = true ;
      },
      //隐藏图片
      diminish () {
        setTimeout(() => {
          let loadmore = document.getElementsByClassName("loadmore-ul") ;
          if(loadmore.length > 0) loadmore[0].style.transform = "translate3d(0px, 0px, 0px)" ;
        },200) ;
        this.imgShow = false ;
      }
    }
  }
</script>
<style lang="less" scoped>
   input[type='checkbox'] {
        -webkit-appearance: none;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        outline: none;
        box-shadow: 0 0 0 1px gray;
    }
     input[type='checkbox']:checked{
       border: 1px solid #fb685b;
       outline: none;
       box-shadow: 0 0 0 1px #fb685b;
     }

    input[type='checkbox']:before {
        content: '';
        display: block;
        width: 60%;
        height: 60%;
        margin: 20% auto;
        border-radius: 50%;
    }

    input[type='checkbox']:checked:before {
        background: #fb685b;
    }
  .checkbox-range-span{
    font-family:'PingFangSC Medium';
    font-size:.26rem;
    color:#fb685b;
    font-weight: bold;
  }
  .span-word{
    font-family:'PingFangSC regular';
    color:#3a3a3a;
    font-size:.26rem;
  }
  .range-ul-li{
    display: inline-block;
    width: 1.97rem;
    height:1.56rem;
    margin:.2rem .1rem .2rem 0;
  }
  .range-ul-img{
    width: 1.97rem;
    height: 1.56rem;
  }
  .range-ul{
    width:100%;
    line-height:0.3rem;
  }
  .checkbox-result-span{
    font-family:'PingFangSC Regular';
    font-size:.28rem;
    color:#333;
  }
  .checkbox-result-message{
    font-family:'PingFangSC Regular';
    font-size:.24rem;
    color:#999;
  }
  .vote-button{
    background-color:#fb685b;
    width:2.2rem;
    border-radius:.05rem;
    height:.7rem;
    font-family:'PingFangSC Regular';
    font-size:.3rem;
    color:#fff;
    border:none;
    margin:.3rem 0 0 0;
  }
  .vote-button-nostart{
    background-color:lightgrey;
    width:2.2rem;
    border-radius:.05rem;
    height:.7rem;
    font-family:'PingFangSC Regular';
    font-size:.3rem;
    color:#fff;
    border:none;
    margin:.3rem 0 0 0;
  }
  .checkbox-myinput{
    width: .4rem;
    height: .4rem;
    border-radius: .4rem;
  }
  .checkbox-mylabel{
    font-size: 0.28rem;
    font-family: "PingFangSC Regular";
    color: #3A3A3A;
    word-wrap:break-word;
    word-break:break-all;
  }
  .mt-progress-progress{
    background-color: #34a186;
  }
  .vote-left-count{
    font-family: "PingFangSC Regular";
    font-size: 0.24rem;
    color: #666666;
  }
</style>
